<div ng-controller="HomeController" class="">
    <div class="main">
        <!--轮播部分-->
        <div class="slider">
            <ul class="slider-img">
                <li>
                    <img src="http://s4.xiaohongshu.com/static/img/web/home/banner_a.jpg?s=1475084382" alt=""
                         style=""/>
                </li>
                <li>
                    <img src="http://s4.xiaohongshu.com/static/img/web/home/banner_e.jpg?s=1471971752" alt=""
                         style=""/>
                </li>
                <li>
                    <img class="" src="http://s4.xiaohongshu.com/static/img/web/home/banner_d.jpg?s=1471971752" alt="小红书_下载APP"
                         style=""/>
                </li>
            </ul>
            <a class="slider-left" href="">
                <img style="" src="http://s4.xiaohongshu.com/static/img/web/home/left_arrow.png?s=1471971752">
            </a>
            <a class="slider-right"  href="">
                <img style="" src="http://s4.xiaohongshu.com/static/img/web/home/right_arrow.png?s=1471971752">
            </a>
        </div>
        <!--<div style="margin: auto">-->
        <div class="selected">每日精选笔记
        <span class="more">
            更多
            <img src="http://s4.xiaohongshu.com/static/img/web/home/arrow.png?s=1471971752">
        </span>
        </div>
        <ul class="specify-li" style="margin: 0 auto;width: 1200px;height: 1974px">

        </ul>
        <!--</div>-->
    </div>
</div>
<!--specify模板-->
<script id="specifyTemp" type="text/html">
    <li class="neirong">
        <a href="#">
            <div class="spe-img">
                <img src="{{imageb}}" alt="">
            </div>
            <div class="spe-text">{{desc}}</div>
            <div class="spe-info">
                <a href=""><img src="//s4.xiaohongshu.com/static/img/v2/web/common/comment.png" alt="">
                    <span>{{comments}}</span></a>
                <a href="" style="position: absolute;right: 50px"><img src="//s4.xiaohongshu.com/static/img/v2/web/common/unfollow.png" alt="">
                    <span>{{likes}}</span></a>
            </div>
        </a>
    </li>
</script>
<!--js---代码-->
<script type="text/javascript">
    var nowImg=0;
    var lis=$(".slider-img li");
    var $bannerIn=$(".slider-img");
    $(".slider-img li:first").clone().appendTo(".slider-img");
    function donghua(){
        $bannerIn.animate({
            "left":nowImg*(-1200)
        },700)
    }
    //			按钮事件
    $(".slider-left").mouseover(function () {
        $(".slider-left img").css("display", "block")
    }).mouseout(function () {
        $(".slider-left img").css("display", "none")
    }).click(function(){
//        alert("hhhhhh");
        if(!$bannerIn.is(":animated")){//判断是否在运动
            if(nowImg>0){//用于区分是否在第一张图
                nowImg--;
                donghua();
            }else{
                nowImg=lis.length-1;//如果nowImg小于0就让它等于最大的值，就是跳到最后一张
                $bannerIn.css("left",lis.length*-1200);//用于让它实现平滑的切换，lis.length*-1200就是克隆的最后一张的位置
                donghua();
            }
        }
    });

    $(".slider-right").mouseover(function () {
        $(".slider-right img").css("display", "block")
    }).mouseout(function () {
        $(".slider-right img").css("display", "none")
    }).click(lunbo);//调用lunbo函数
    function lunbo(){
        if(!$bannerIn.is(":animated")){//判断是否在运动
            if(nowImg<lis.length-1){//用于区分是否在第一张图
                nowImg++;
                donghua();
            }else{
                nowImg=0;//如果nowImg等于最大值就让它等于0，就是跳到第一张
                $bannerIn.animate({"left":lis.length*(-1200)},700,function(){//用回调函数就是因为没有克隆最后一张的，
                    //所以动画完成后让它平滑切换到第一张
                    $bannerIn.css("left",0);//用于让它实现平滑的切换
                })
            }
        }
    }
    //自动轮播
    t=setInterval(lunbo,1500)//无限轮播
    $(".slider").mouseenter(function() {//当鼠标移上来时就清除无限轮播事件
        clearInterval(t);
    });
    $(".slider").mouseleave(function() {//当鼠标离开时就执行无限轮播
        clearInterval(t);
        t=setInterval(lunbo,1500)
    });//轮播代码结束

    //    $(function () {
    $.ajax({
        url: "json/index.json",//请求DetailList.json文件里面的数据
        method: "get",
        dataType: "json",
        success:function (data) {
            $.each(data.array,function (i,value) {
                var $li = $(template("specifyTemp", value)).appendTo(".specify-li");
            });
        }
    });
    //    });
</script>